<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/vant@2.12.54.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/nav.css" />
    <style>
      .my-v-cloak {
  display: none;
}
    </style>
  </head>
  <body>
    <div id="app" v-cloak class="my-v-cloak">
      <div class="nav">
        <ul class="list">
          <li class="item art" @click="goToindex">
            <img src="./img/ico1_1.png" alt="" />
            <span>首页</span>
          </li>
          <li class="item" @click="goToproduct">
            <img src="./img/ico2.png" alt="" />
            <span>产品列表</span>
          </li>
          <li class="item" @click="goTovideo">
            <img src="./img/ico3.png" alt="" />
            <span>视频介绍</span>
          </li>
          <li class="item" @click="goTocontactus">
            <img src="./img/ico4.png" alt="" />
            <span>联系我们</span>
          </li>
        </ul>
      </div>

      <div class="banner">
        <van-swipe :autoplay="3000" :show-indicators="false">
          <van-swipe-item v-for="(item, index) in images" :key="index">
            <img :src="item.logo.file_path" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="list_1">
        <div class="centent">
          <div class="btn" @click="goToabout">
            <img src="./img/Logo_2.png" alt="" />
            <span>关于我们</span>
          </div>
          <div class="btn" @click="goTologin">
            <img src="./img/tx.png" alt="" />
            <span>提货</span>
          </div>
        </div>
      </div>
      <div class="list_2">
        <div class="centent">
          <div class="top">
            <h6>为您推荐</h6>
          </div>
          <ul class="list">
            <li class="item" @click="goTodetails(item.goods_id)" v-for="item in listdata">
              <img :src="item.image.file_path" alt="" />
              <p class="f12">{{item.sku}}</p>
              <p class="f14">{{item.goods_name}}</p>
            </li>
           
          </ul>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/vue@2.7.14.js"></script>
  <script src="./js/element-ui@2.15.14.js"></script>
  <script src="./js/axios@1.5.0.min.js"></script>
  <script src="./js/vant@2.12.54.min.js"></script>
  <script src="./js/request.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          show: true,
          show_1: false,
          images: [],
          listdata:[]
        };
      },
      mounted() {
        document.getElementById('app').classList.remove('my-v-cloak');
        this.banner();
        this.fetchData();
      },

      methods: {
        //获取轮播图
        banner() {
          const url = baseUrl + "/goods.Goods/bannerList";
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
            },
          })
            .then((res) => {
              // 处理响应结果
              // this.options_1 = res.data.data;
              this.images = res.data.data.list;
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
        },
        //获取推荐产品数据
        fetchData() {
          const url = baseUrl + "/goods.Goods/recommendGoods";
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
            },
          })
            .then((res) => {
              // 处理响应结果
              this.listdata = res.data.data.list.data;
              console.log(res.data.data.list.data);
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
        },
        

        goToabout() {
          window.location.href = "about.html";
        },
        goTologin() {
          window.location.href = "login.html";
        },
        goTocontactus() {
          window.location.href = "contactus.html";
        },
        goToindex() {
          window.location.href = "index.html";
        },
        goToproduct() {
          window.location.href = "product.html";
        },
        goTovideo() {
          window.location.href = "video.html";
        },
        goTodetails(id) {
          console.log(id);
          window.location.href = "product_details.html?id=" + id;
        },
      },
    });
    Vue.use(vant);
  </script>
</html>
